<template>
  <div>
    <div>
        <div class="develop" ref="develop"></div>
    </div>
  
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
     
    };
  },
  mounted() {
    // 绘制科研力量 图
    this.drawDevelop();
  },
  methods: {
    // 绘制科研力量 图
    drawDevelop() {
      let develop = echarts.init(this.$refs.develop);
      // 用于清除定时器
      let tootipTimer = null;
      let option0 = {
        grid: {
          left: "5%",
          right: "7%",
          bottom: "3%",
          top: "18%",
          containLabel: false,
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "国家实验室",
              "国家重点实验室",
              "省级重点实验室",
              "省级实验室培育基地",
              "省级工程实验室",
              "国家级企业技术中心",
              "省级企业技术中心",
              "国家级工程研究中心",
              "省级工程研究中心",
              "国家级创新平台",
              "省级创新平台",
              "地方创新示范中心",
            ],
            nameLocation: "center",
            // axisLabel: {
            //   color: "#fff",
            //   fontFamily: "Microsoft YaHei",
            //   fontWeight: 400,
            //   fontSize: 12,
            // },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: false,
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
          },
        ],
        series: [
          {
            name: "个数",
            type: "bar",
            data: [1, 12, 43, 18, 17, 7, 23, 4, 47, 27, 43, 1],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
                // { coord: [1,12], value:12},
                // { coord: [2,43], value:43},
              ],
              animation: true,
              animationThreshold: 2000,
              animationDuration: function (idx) {
                // 越往后的数据时长越大
                return idx * 200;
              },
            },
            barWidth: "70%",
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#3CCACB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#002DFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              shadowColor: "#0063FF",
              shadowOffsetX: 3,
              shadowOffsetY: -1,
              // normal: {
              //   //每根柱子颜色设置
              //   color: function (params) {
              //     let colorList = [
              //       "#D85C5C",
              //       "#399D6F",
              //       "#1A63B1",
              //       "#D85C5C",
              //       "#399D6F",
              //       "#1A63B1",
              //       "#D85C5C",
              //       "#399D6F",
              //       "#1A63B1",
              //       "#D85C5C",
              //       "#399D6F",
              //       "#1A63B1",
              //     ];
              //     return colorList[params.dataIndex];
              //   },
              // },
            },
            emphasis: {
              itemStyle: {
                color: "rgba(70,237,238)",
              },
            },
          },
        ],
      };
      // 3,绘图
      develop.setOption(option0);
      // 可调用clearLoop方法，清除定时器
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = tools.loopShowTooltip(develop, option0, {
        interval: 1500, // 轮播间隔时间
        loopSeries: true, // 是否开启轮播循环
      });
    },
  },
};
</script>

<style scoped>
.develop{
  width: 100%;
  height: 300px;
}
</style>